<template>
  <div style="width: 100%; height: 50%; overflow: auto;">
    <TreeChart :json="treeData" @click-node="clickNode" />
  </div>
</template>

<script>
import TreeChart from "vue-tree-chart";

export default {
  components: { TreeChart },
  data() {
    return {
      treeData: {
        id: "root",
        name: "根节点",
        children: [
          {
            id: "child-1",
            name: "子节点 1",
            children: [
              {
                id: "child-1-1",
                name: "子节点 1-1",
                children: [],
              },
            ],
          },
          {
            id: "child-2",
            name: "子节点 2",
            children: [],
          },
        ],
      },
    };
  },
  methods: {
    clickNode: function(node){
      // eslint-disable-next-line
      console.log(node)
    },
  }
};
</script>

<style scoped>